<template>
	<view>
		<view class="pic">
			<image src="/static/nan.jpg" mode=""></image>
		</view>
		<view class="flex-ioc">
			<view class="iocn" v-for="(item,index) in 10" :key="index">
				<image src="/static/nan.jpg" mode=""></image>
				<view>洗吹</view>
			</view>
			<view class="pre">
				<view class="pre-cen">预约到店</view>
				<view class="pre-cen">预约上门</view>
			</view>
		</view>
		<view class="list">
			<view class="list-rank">
				<view class="list-left"></view>
				<view class="rank">
					<view class="rank1">榜单</view>
					<view class="rank2">RANK</view>
				</view>
			</view>
			<view class="list-cen">
				<view class="cen-1" @click="goWelfare()">福利榜</view>
				<view class="cen-1" @click="goStylist()">发型师榜</view>
				<view class="cen-1" @click="goBusiness()">商家榜</view>
			</view>
		</view>
		<view class="list">
			<view class="list-rank">
				<view class="list-left"></view>
				<view class="rank">
					<view class="rank1">发型师</view>
					<view class="rank2">RANK</view>
				</view>
			</view>
			<view class="swiper">
				<swiper class="img-swipe" :autoplay="false" :circular="true" :indicator-dots="false" :interval="3000" :current="current"
				 @change="swiperChange">
					<swiper-item class="item" v-for="(it,dex) in swiper" :key="dex">
						<view class="commodity-list" v-for="(item,index) in it.commodityList" :key="index">
							<view class="cen-img">
								<image class="commodity-img" src="/static/nan.jpg" mode=""></image>
							</view>
							<view class="ico_fen">
								<text class="fen">{{item.designerScore}}分</text>
								<text class="icon iconfont">&#xe621;</text>
								<text class="icon iconfont">&#xe621;</text>
								<text class="icon iconfont">&#xe621;</text>
							</view>
							<view class="aa">
								<view class="name">
									<view class="name_top">{{item.designerName}} </view>
									<view class="name_bottom">{{item.occupationName}}｜{{item.designerLevel}}</view>
								</view>
								<view class="zj">
									<view class="zj_infor">{{item.designerPosition}}｜从业{{item.workingYears}}年</view>
								</view>
								<!-- //服务和地址 -->
								<view class="serve_add">
									<view class="serve">服务 234</view>
									<view class="add">6.7km</view>
								</view>
							</view>
						</view>
					</swiper-item>

				</swiper>
				<view class="dots-container">
					<view v-for="(item,index) in swiper" :key="index">
						<view :class="['dot', index === swiperCurrent ? 'active' : '']"></view>
					</view>
				</view>
			</view>

		</view>
		<view class="works">
			<view class="list-ranks">
				<view class="list-lefts"></view>
				<view class="ranks">
					<view class="rank1s">作品集</view>
					<view class="rank2s">RANK</view>
				</view>
			</view>
			<view class="list-cens">
				<view class="cen-1s">
					<view>#女士作品#</view>
					<view>2345条更新</view>
				</view>
				<view class="cen-1s">
					<view>#女士作品#</view>
					<view>2345条更新</view>
				</view>
			</view>
		</view>
		<!-- 品牌馆 -->
		<branfd @click='gobranfd'></branfd>
		<!-- 服务精选 -->
		<selected></selected>
	</view>
</template>

<script>
	import branfd from './branfd.vue'
	import selected from './selected.vue'
	export default {
		components: {
			branfd,
			selected,
		},
		data() {
			return {
				current: 0,
				swiperCurrent: 0,
				swiper: [{
						commodityList: [{
								designerScore: '4.5',
								designerName: '打蜡',
								occupationName: '理发师',
								designerLevel: '高级',
								designerPosition: '总监',
								workingYears: '10'
							},
							{
								designerScore: '4.5',
								designerName: '打蜡',
								occupationName: '理发师',
								designerLevel: '高级',
								designerPosition: '总监',
								workingYears: '10'
							},
							{
								designerScore: '4.5',
								designerName: '打蜡',
								occupationName: '理发师',
								designerLevel: '高级',
								designerPosition: '总监',
								workingYears: '10'
							},
						],

					},
					{
						commodityList: [{
								designerScore: '4.5',
								designerName: '打蜡',
								occupationName: '理发师',
								designerLevel: '高级',
								designerPosition: '总监',
								workingYears: '10'
							},
							{
								designerScore: '4.5',
								designerName: '打蜡',
								occupationName: '理发师',
								designerLevel: '高级',
								designerPosition: '总监',
								workingYears: '10'
							},
							{
								designerScore: '4.5',
								designerName: '打蜡',
								occupationName: '理发师',
								designerLevel: '高级',
								designerPosition: '总监',
								workingYears: '10'
							},
						],

					}
				]

			}
		},
		methods: {
			swiperChange(e) {
				this.swiperCurrent = e.detail.current
			},
			goWelfare() {
				uni.navigateTo({
					url: '/pagesB/hairsalon/index'
				})
			},
			// 发型师榜
			goStylist() {
				uni.navigateTo({
					url: '/pagesB/Stylist/stylist'
				})
			},
			// 商家榜
			goBusiness() {
				uni.navigateTo({
					url: '/pagesB/Stylist/business'
				})
			}
		}
	}
</script>

<style lang="scss">
	.pic {
		width: 100%;
		height: 315rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.flex-ioc {
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		border-bottom: 10rpx solid #e7e7e7;

		.iocn {
			padding: 35rpx;
			text-align: center;


			image {
				width: 44rpx;
				height: 44rpx;
				border-radius: 50%;
			}

			view {
				margin-top: 25rpx;
				font-size: 30rpx;
				color: #000000;
				font-weight: bold;
			}
		}
	}

	.pre {
		width: 100%;
		margin: 15rpx 0;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;

		.pre-cen {
			width: 45%;
			height: 142rpx;
			background-color: #dddddd;
			padding: 25rpx 0 0 25rpx;
		}
	}

	.list {
		padding: 0 25rpx;
		border-bottom: 10rpx solid #DDDDDD;

		.list-rank {
			padding: 30rpx 0;
			display: flex;
			align-items: center;

			.list-left {
				width: 5rpx;
				height: 48rpx;
				background-color: #141414;
				margin-right: 10rpx;
			}

			.rank {

				.rank1 {
					font-size: 30rpx;
					color: #000000;
					font-weight: 500;
				}

				.rank2 {
					font-size: 20rpx;
					color: #000000;
					font-weight: bold;
					margin-top: 5rpx;
				}
			}
		}

		.list-cen {
			width: 100%;
			margin-bottom: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.cen-1 {
				width: 32%;
				padding: 152rpx 0 40rpx 0;
				text-align: center;
				background-color: #00c6c2;
			}
		}
	}

	.swiper {
		padding: 10rpx 0 40rpx 0;
		position: relative;

		.dots-container {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 10rpx;
			display: flex;
			justify-content: center;

			.dot {
				margin: 0 8rpx;
				width: 12rpx;
				height: 12rpx;
				background: #b2b2b2;
				border-radius: 8rpx;
			}

			.dot.active {
				background: #4e4e4e;
			}
		}

		.item {
			width: 100%;
			display: flex;
			align-items: flex-end;
			justify-content: space-between;

			.commodity-list {
				width: 32%;

				.cen-img {
					width: 100%;
					height: 260rpx;
					position: relative;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.ico_fen {
					position: absolute;
					top: 60%;
					transform: translate(10px, -20px);

					.fen {
						font-size: 20rpx;
						font-family: PingFang;
						font-weight: 500;
						color: #FFFFFF;
					}

					.iconfont {
						color: #F2CB51;
						font-size: 20rpx;
					}
				}

				.aa {
					padding: 10rpx;

					.name {
						display: flex;
						align-items: center;

						.name_top {
							font-size: 20rpx;
							font-family: PingFang;
							font-weight: bold;
							color: #4E4E4E;
						}

						.name_bottom {
							font-size: 16rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #323232;
							padding-left: 20rpx;
						}
					}

					.zj {
						padding-top: 10rpx;

						.zj_infor {
							font-size: 16rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #323232;
						}
					}

					.serve_add {
						margin-top: 10rpx;
						display: flex;
						justify-content: space-between;

						.serve {
							font-size: 16rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #7B7B7B;
						}

						.add {
							font-size: 16rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #7B7B7B;
						}

					}
				}

			}
		}

	}

	.works {
		padding: 0 25rpx;
		border-bottom: 10rpx solid #DDDDDD;


		.list-ranks {
			padding: 40rpx 0;
			display: flex;
			align-items: center;

			.list-lefts {
				width: 5rpx;
				height: 48rpx;
				background-color: #141414;
				margin-right: 10rpx;
			}

			.ranks {

				.rank1s {
					font-size: 30rpx;
					color: #000000;
					font-weight: 500;
				}

				.rank2s {
					font-size: 20rpx;
					color: #000000;
					font-weight: bold;
					margin-top: 5rpx;
				}
			}
		}

		.list-cens {
			width: 100%;
			margin-bottom: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.cen-1s {
				padding: 58rpx 102rpx;
				text-align: center;
				background-color: #00c6c2;

				view {
					font-size: 26rpx;
					color: #fff;
				}
			}
		}
	}
</style>
